Parent List

IN THIS PAGE

Has parent list
Parent list id
Pre-load data
- Parent/Child Data and the Detail View
Parent-Child Linking Fields
- Linking field - parent List
- Linking field - this List
Empty list when parent record is changed
Object name in parent List for this List's data
Videos

Description

The Parent List properties help in binding one list a the child of a second list. This can be particularly useful in creating cascading lists where the selection in one list will determine the available options for a second list.

Discussion

The Parent List properties are used to add a parent-child (or master-detail) relationship between two List controls. The parent-child relationship is configured in the child List control. The child List is automatically filtered whenever the selected row in the parent List changes.

Parent-List options are only available in Lists based on a SQL, Static, or Custom data source.

Has parent list

Specifies if the data in this List is filtered based on the selection in the parent list.

Parent list id

Specifies the id of this List's parent list. For example, a UX contains two List controls, one named 'parent' the other 'child'.

UX with two lists

To assign the 'parent' List as the parent of the 'child' List, the child's parent List information needs to be configured. Select the child List control and open the List properties property for the list.

List properties

On the Data Source tab, check Has parent list. To set the 'parent' List control as the parent of this List control, expand the dropdown for Parent List. This dropdown will show all of the Lists in the component. Choose the List that is the parent of this control.

Parent list id

Pre-load data

This property is only shown when the in List is based on a SQL data source. Pre-load data specifies if the data for this List should be pre-loaded when the data for this List's parent List is loaded. This option is typically used when you are loading data so that the UX can be used while disconnected. If the child List data are pre-fetched, then no Ajax callback is necessary to populate a child List when the selected row in the parent List is changed.

Parent/Child Data and the Detail View
You can use an IN clause with an argument array in the SQL query for a Data Series or List Control.
In disconnected applications, when you define parent-child relationships between List controls you must set the child List's 'Pre-load data' property to true. Even when building connected applications you might still want to define a parent-child relationship between Lists and define a Detail View for each List. This could allow editing of the List data without the hassle of pre-loading the child data (since Alpha Anywhere can easily fetch the child data as needed as you have a connection).
You can edit data in the child List(s) (using the child List's Detail View) without checking the pre-load option, but you must specify linking values in the optional Linking fields section. The data you fill into these properties is used to ensure that the values in the linking fields are automatically set to the corresponding values in the parent List record when insert or updates are performed.
Configuring Pre-load Data and Linking Fields

Parent-Child Linking Fields

If the List is based on a SQL data source, the Linking field properties will be shown. The Linking field for the parent and child List control are used to filter the child List's data when the selected row in the parent list is changed. Alpha Anywhere retrieves all records in the child List whose Linking field's value matches the value of the parent List's Linking field.

Linking field - parent List
The field(s) in the Parent List control that contain the key value used to match records with the Child list.
Linking field - this List
The field(s) in the Child List (the List currently being edited) that store the key value used to match records with the Parent List.

Empty list when parent record is changed

If checked, the data in the child List is removed, rendering the List blank until the data to populate the child List has been retrieved for the current parent record. This option is often used when populating the child list takes a while to prevent users from selecting and editing records that are not related to the parent record.

Object name in parent List for this List's data

This property is shown when the List's data source is Static or Custom.

The data for this List will be read from the data in the current row of the parent List. You need to specify the name of the object in the parent List's data object that contains the data for this row.

If this List is based on a SQL query and has a 'Detail View' that is updateable, the object name MUST start with _LIST_ (e.g. _LIST_Orders)

While relying on SQL data is perhaps more practical for creating cascading lists, it is still possible to make cascading lists from static data. Here is how:

Open the UX Builder and go to the UX Controls page. Scroll through the Data Controls list until you come to the List Control. Click List to add a list control to your component. Give this control the name 'parent'.
Adding a new List
Highlight the 'parent' list control and scroll down the control's properties list on the right until you come to the List Properties. Click the button next to the List properties property. The List Builder will open.
- Parent List control
- List properties
Open the Data Source tab. Select Static as the 'Data Source Type:'.
Select Static Data Source
Still on the Data Source tab, click the button next to the Static data property
Define Static data

In the Static Choices box add the following JSON data and then click OK.

[
    {"Firstname": "John", "Lastname" : "Smith", "City" : "Boston", "State" : "MA", "Children": [
            {"Name" : "Callie", "Age" : 5},
            {"Name" : "Griffin", "Age" :3},
            {"Name" : "Luke", "Age" : 1}
        ]
    }, 
    {"Firstname": "Henry", "Lastname" : "Rhodes", "City" : "New York", "State" : "NY", "Children": [
            {"Name" : "Howard", "Age" : 15},
            {"Name" : "Robert", "Age" : 11}
        ]
    }, 
    {"Firstname": "Allison", "Lastname" : "Berman", "City" : "Los Angeles", "State" : "CA", "Children": [
            {"Name" : "Jeff", "Age" : 35},
            {"Name" : "Roxanne", "Age" :33},
            {"Name" : "Claudia", "Age" : 31},
            {"Name" : "Denzel", "Age" : 11}
        ]
    }
]

Static Choices

Go to the List Layout tab. Use the blue > arrow to move the 'Firstname' and 'Lastname' fields from the 'available fields' list into the 'columns in list'. Click OK to close the list builder.
List Layout
On the UX Controls page, go back to the Data Controls menu and add a second List control to the component. Give this control the name 'child'.
Child List
Highlight the 'child' list control and open it's List Builder; by clicking button next to the List properties property on the right or by double clicking on the control itself.
On the Data Source tab select 'Static' in the Data Source Type menu.
Select Static Data Source for Child List
Click the button next to the Static data property.
Define Static data for Child List
In the Static Choices dialog add the following and click OK
```
Name|Age
```
Static data definition for Child List
In the Parent List section check the Has parent list checkbox.
Enable Has parent list
Set the 'Parent list id' property to 'parent', the name of the first list control
Set Parent list id
Now set the Object name in parent List for this List's data to 'Children'.
Object name in parent List for this List's data
Here 'Children' references the 'Children' array object that is stored in the JSON data in the 'parent' control. The Name|Age that we already defined as static data for the 'child' list control will draw their value from the Name and Age properties inside the Children array object,.
Go to the List Layout tab and use the blue > arrow to move the 'Name' and 'Age' fields from the Available Fields list to the Columns in List.
Child List Layout
Click OK to close the List Builder. Run the Component in Live Preview.
Preview of Parent/Child List
Try clicking on any given row in the 'Parent' list. You should see the 'Child' list change to match.
Child List displaying related data for selected Parent List row

Videos

For a video demonstration on how to create cascading lists using the 'Parent List' property watch the video below:

Watch Video

You can read the transcripts for this video here: Transcript Part 1, Transcript Part 2.